﻿@{
    ViewBag.Title = "规格管理";
}
@section headerSection{
    <style>
        #exampleToolbar > .form-group {
            float: left;
            margin: 0;
            margin-left: 5px;
        }
        .fixed-table-container {
            top: -255px;
        }
        .tab-height {
            height: 100px;
            line-height: 80px !important;
            padding-left: 80px !important;
        }
        .inline-spec{
            display:inline-block;
        }
        .option-sepc{
            width:250px;
            height:34px;
        }
        .form-spec{
            padding:10px 0;
        }
    </style>
}
<div class="wrapper animated fadeInRight autoHeight" style="overflow-y:hidden;">
    <!-- Panel Other -->
    <div class="row autoHeight" style="background-color: #fff;">
        <div class="col-sm-12" style="height: 100%;">
            <div class="tabs-container" style="height: 100%;">
                <div class="tabs-left" style="height: 100%;">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" class="tab-height" href="#tab-spec"> 规格管理</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" class="tab-height" href="#tab-price"> 价格管理</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" class="tab-height" href="#tab-number"> 库存管理</a>
                        </li>
                    </ul>
                    <div class="tab-content " style="height: 100%;">
                        <!-- 规格管理 -->
                        <div id="tab-spec" class="tab-pane active" style="height: 100%;">
                            <div class="panel-body" style="height: calc(100% - 2px);padding:10px;">
                                <div class="example">
                                    <div class="btn-group hidden-xs" id="exampleToolbar" role="group" style="margin-left:-8px;">
                                        <button id="specAdd" type="button" class="btn btn-outline btn-primary">
                                            <i class="glyphicon glyphicon-plus" aria-hidden="true">添加规格</i>
                                        </button>
                                        <div class="form-group">
                                            <input id="specName" name="specName" type="text" class="form-control" placeholder="请输入规格名称">
                                        </div>
                                        <div class="form-group" style="margin-top:-2px;width:150px;">
                                            <select id="isMoney" name="isMoney" title="是否影响价格" class="form-control show-tick selectpicker" placeholder="请选择是否影响价格">
                                                <option value="-1" selected>全部</option>
                                                <option value="1">是</option>
                                                <option value="0">否</option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="margin-top:-2px;width:150px;">
                                            <select id="isType" name="isType" title="类型" class="form-control show-tick selectpicker" placeholder="请选择类型">
                                                <option value="" selected>全部</option>
                                                <option value="文本">文本</option>
                                                <option value="图片">图片</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <button id="btnSpecSearch" class="btn btn-primary" type="button"><i class="fa fa-search"></i>&nbsp;查询</button>
                                        </div>
                                        <div class="form-group">
                                            <button id="btnDeleteFile" class="btn btn-danger" type="button"><i class="fa fa-trash"></i>&nbsp;重置规格组合</button>
                                        </div>
                                    </div>
                                    <table id="exampleTableToolbar" data-mobile-responsive="true" data-radio="true"></table>
                                </div>
                            </div>
                        </div>
                        <!-- 价格管理 -->
                        <div id="tab-price" class="tab-pane" style="height: 100%;">
                            <div class="panel-body" style="height: calc(100% - 2px); padding: 10px 10px 10px 0; ">
                                <iframe class="J_iframe" name="iframe0" style="position: relative; top: -300px;" width="100%" height="100%" src="@Url.Action("PriceList", "VRSpecification",new { fileId=ViewBag.fileId})" frameborder="0" data-id="@Url.Action("PriceList", "VRSpecification")" seamless></iframe>
                            </div>
                        </div>
                        <!-- 库存管理 -->
                        <div id="tab-number" class="tab-pane" style="height: 100%;">
                            <div class="panel-body" style="height: calc(100% - 2px); padding: 10px 10px 10px 0;">
                                <iframe class="J_iframe" name="iframe0" style="position: relative; top: -300px;" width="100%" height="100%" src="@Url.Action("RepertoryList", "VRSpecification",new { fileId=ViewBag.fileId})" frameborder="0" data-id="@Url.Action("RepertoryList", "VRSpecification")" seamless></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
<!-- 添加/编辑规格 -->
<div id="specForm" style="width: 100%;height:100%; overflow-x: hidden;overflow-y:auto; display: none;">
    <form class="form-horizontal m-t" id="specFormTable" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-2 control-label">规格名称<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
            <div class="col-sm-4">
                <input id="specName" name="specName" type="text" class="form-control input-sm" placeholder="请输入规格名称" title="请输入规格名称" required="" aria-required="true" />
                <input type="hidden" id="specID" name="specID" />
                <input type="hidden" id="fileId" name="fileId" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">影响价格<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
            <div class="col-sm-4">
                <select id=specMoney title="请选择影响价格" name="specMoney" class="selectpicker show-tick bs-select-hidden" data-live-search="true" required="" aria-required="true" placeholder="请选择影响价格">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">类型<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
            <div class="col-sm-4">
                <select id=specType title="请选择类型" name="specType" class="selectpicker show-tick bs-select-hidden" data-live-search="true" required="" aria-required="true" placeholder="请选择类型">
                    <option value="文本">文本</option>
                    <option value="图片" selected>图片</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">子规格<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
            <div id="optionChild" class="col-sm-10">
                <div class="form-spec form-inline">
                    <input type="text" id="optionName" class="form-control input-sm option-sepc optionName" placeholder="请输入名称" title="请输入规格名称" required="" aria-required="true" />
                    <input type="hidden" id="optionID" class="optionID" />
                    <div id="file-pretty" class="inline-spec">
                        <input type="file" id="optionImage" class="form-control file_spec">
                        <input type="hidden" id="imageCode" class="imageCode" value="" />
                    </div>
                    <div id="picEdit" class="checkbox checkbox-primary inline-spec">
                        <input id="isEdit" type="checkbox" class="isEdit">
                        <label for="isEdit">
                            更新图片
                        </label>
                    </div>
                    <button id="btnAdd" class="btn btn-primary btn-circle btn-outline" type="button">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
         </div>
    </form>
</div>
@section footSection{
    <script>
        //const { encode } = require("punycode");
        var options, $table, addOrEditUrl;
        var fileId;
        var specManager = {
            initPage: function () {
                specManager.initData();
                specManager.initTable();
                specManager.bindEvent();
            },
            initData: function () {
                fileId = $.getUrls("fileId");
                $('#fileId').val(fileId);
                var code = specManager.autoCode();
                $('#optionImage').attr('name', code);
                $('#imageCode').val(code);
            },
            //初始化Table
            initTable: function () {
                options = {
                    url: ctx + "/VRSpecification/InitTable",
                    cutHeight: 25,
                    toolbar: "#exampleToolbar",
                    uniqueId:"specID",//主键id
                    queryParams: function (params) {
                        params = {
                            //页面大小  
                            rows: params.limit,
                            //第几页
                            page: params.offset / params.limit + 1,
                            fileId: fileId,
                            specName: encodeURI($('#specName').val()),
                            isMoney: $('#isMoney').val(),
                            isType: encodeURI($('#isType').val())
                        }
                        return params;
                    },
                    columns: [
                         {
                            field: 'specID',
                            title: '操作',
                            align: 'center',
                            formatter: function (value, row, index) {
                                //编辑
                                var str = "<button class=\"btn btn-info btn-circle btn-outline\" title=\"编辑\" onclick=\"specManager.specEdit(" + value + ")\" type=\"button\"><i class=\"fa fa-pencil\"></i></button>&nbsp;";
                                //删除
                                str += "<button class=\"btn btn-danger btn-circle btn-outline\" title=\"删除\" onclick=\"specManager.specDelete(" + value + ")\" type=\"button\"><i class=\"fa fa-trash\"></i></button>&nbsp;";
                                return str;
                            }
                        }, {
                            field: 'specName',
                            title: '规格名称',
                            align: 'center'
                        }, {
                            field: 'specType',
                            title: '类型',
                            align: 'center'
                        }, {
                            field: 'specMoney',
                            title: '影响价格',
                            align: 'center',
                            formatter: function (value, row, index) {
                                if (value)
                                    return "是";
                                else
                                    return "否";
                            }
                        }, {
                            field: 'specOptionName',
                            title: '子规格',
                            align: 'center',
                            formatter: function (value, row, index) {
                                if (row.specType === "图片" && row.specOptionPic)
                                {
                                    var pic = "";
                                    var picList = row.specOptionPic.toString().split(",");
                                    $.each(picList, function (index, item) {
                                        pic += "<img src='" + item.replace("~", window.location.origin + ctx) + "' style='width:50px;height:50px;margin-right:8px;' />";
                                    });
                                    return pic;
                                }
                                else
                                    return value;
                            }
                        }]
                }
                $table = tableHelper.initTable("exampleTableToolbar", options);
            },
            //绑定事件
            bindEvent: function () {
                //查询
                $('#btnSpecSearch').click(function () {
                    $table.bootstrapTable('refresh', options);
                });
                //添加规格
                $('#specAdd').on('click', function () {
                    specManager.editForm();
                    $('#picEdit').css('display', 'none');
                });
                //添加子规格
                $('#btnAdd').on('click', function () {
                    specManager.autoCreateSepc();
                });
                //更新类型
                $('#specType').on('change', function () {
                    if ($(this).val() === "文本") {
                        $('.inline-spec').css("display", "none");
                        $('.optionName').css('width', "380px");
                    }
                    else {
                        $('.inline-spec').css("display", "inline-block");
                        $('.optionName').css('width', "180px");
                    }
                });
                //重置数据
                $('#btnDeleteFile').on('click', function () {
                    layer.confirm('重置规格组合将删除当前商品的全部库存以及价格，您确定需要重置吗？', {
                        title:'警告',
                        icon:3,
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        var index = layer.msg("数据重置中...", { icon: 6, time: 6000 });
                        $.ajax({
                            type: 'post',
                            url: ctx + '/VRSpecification/UpdateSpecGroup/' + fileId,
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                layer.close(index);
                                if (data.Statu === 0) {
                                    layer.alert("数据重置成功，请重新设置库存以及价格......", {icon:6});
                                    $table.bootstrapTable('refresh');
                                }
                                else
                                    layer.msg(data.Msg, { icon: 5 });
                            }
                        });
                    }, function () { });
                });
            },
            //动态创建子规格
            autoCreateSepc: function (row) {
                var sepcType = $('#specType').val(),
                    fileStyle = "", nameStyle = "";;
                if (sepcType === "文本") {
                    fileStyle = " style=\"display:none;\" ";
                    nameStyle = " style=\"width:380px;\" ";
                }
                var fileCode = specManager.autoCode();
                var optionName = "", optionID = "", picStyle = fileStyle;//是否显示更新图片
                if (row) {
                    optionName = row.optionName;
                    optionID = row.optionID;
                    $('#picEdit').css('display', 'inline-block');
                } else {
                    //无数据
                    picStyle = " style=\"display:none;\" ";
                }
                var str = "<div class=\"form-spec form-inline auto-create\">\n" +
                    "                    <input id=\"optionName\" name=\"optionName\" type=\"text\" " + nameStyle+" value=\"" + optionName+"\" class=\"form-control input-sm option-sepc optionName\" placeholder=\"请输入名称\" title=\"请输入规格名称\" required=\"\" aria-required=\"true\" />\n" +
                    "                    <div id=\"file-pretty\" class=\"inline-spec\" " + fileStyle+">\n" +
                    "                        <input type=\"file\" id=\"" + fileCode + "\" name=\"" + fileCode + "\" class=\"form-control file_spec\">\n" +
                    "                        <input type=\"hidden\" class=\"imageCode\" value=\"" + fileCode + "\" />\n" +
                    "                        <input type=\"hidden\" class=\"optionID\" value=\"" + optionID+"\" />\n" +
                    "                    </div>\n" +
                    "                    <div class=\"checkbox checkbox-primary inline-spec\" " + picStyle+">\n" +
                    "                        <input id=\"isEdit" + fileCode+"\" type=\"checkbox\" class=\"isEdit\">\n" +
                    "                        <label for=\"isEdit" + fileCode +"\">\n" +
                    "                            更新图片\n" +
                    "                        </label>\n" +
                    "                    </div>\n" +
                    "                    <button id=\"btnDelete\" onclick=\"specManager.btnDelete(this);\" class=\"btn btn-danger btn-circle btn-outline\" type=\"button\">\n" +
                    "                        <i class=\"fa fa-remove\"></i>\n" +
                    "                    </button>\n" +
                    "                </div>";
                $('#optionChild').append($(str));
            },
            //删除
            btnDelete: function (sb) {
                var parent = $(sb).parent('div');
                $(parent).remove();
            },
            //自动生成代码
            autoCode: function () {
                return  (S4() + S4() + S4() + S4() + S4());
            },
            //1.5 添加编辑
            editForm: function (row) {
                //重置界面
                var $title = "添加规格";
                if (!row)
                    addOrEditUrl = ctx + "/VRSpecification/AddSpec";//新增
                else {
                    addOrEditUrl = ctx + "/VRSpecification/EditSpec";//编辑
                    $title = "编辑规格";
                }
                //清空表单
                $('#specFormTable').resetHideValidForm();
                //清理动态创建数据
                $('.auto-create').remove();
                //打开编辑
                indexForm = layer.open({
                    title: [$title, 'font-size:18px;'],
                    type: 1,
                    content: $('#specForm'),
                    scroll: true,//是否显示滚动条、默认不显示
                    btn: ['确定', '取消'],
                    area: ['80%', '95%'],
                    success: function (li, o) {
                        if (row != null) {                           
                            //是否影响价格
                            if (row.specMoney)
                                row.specMoney = "1";
                            else
                                row.specMoney = "0";
                            $('#specFormTable')[0].reset();//重置表单
                            $('#specFormTable').LoadForm(row);//表单填充数据
                            //填充子规格数据
                            if (row.specOptionList && row.specOptionList.length > 0) {
                                $.each(row.specOptionList, function (index, item) {
                                    if (index === 0) {
                                        //第一条直接赋值
                                        $('#optionName').val(item.optionName);
                                        $('#optionID').val(item.optionID);
                                    } else {
                                        //动态创建
                                        specManager.autoCreateSepc({
                                            "optionName": item.optionName,
                                            "optionID": item.optionID
                                        });
                                    }
                                });
                            }
                            //文本隐藏附件
                            if (row.specType === "文本") {
                                $('.inline-spec').css("display", "none");
                                $('.optionName').css('width', "380px");
                            }
                            else {
                                $('.inline-spec').css("display", "inline-block");
                                $('.optionName').css('width', "180px");
                            }
                        } 
                    },
                    yes: function (li, o) {
                        //图片时判断是否有上传图片
                        var files = $('.file_spec');
                        $.each(files, function (i, n) {
                            var fileInput = $(n).get(0).files[0];
                            if (!fileInput) {
                                layer.msg('类别为图片时请上传图片！', { icon: 5 });
                                return false;
                            }
                        });
                        if ($('#specFormTable').valid()) {
                            var optionList = [];
                            var optionName = $('.optionName'), imageCode = $('.imageCode'),
                                optionID = $('.optionID'), isEdit = $('.isEdit');
                            $.each(optionName, function (index, item) {
                                var edit= isEdit.eq(index).is(":checked") ? 1 : 0;
                                optionList.push({
                                    "optionID": optionID.eq(index).val(),
                                    "optionName": $(item).val(),
                                    "isEdit": edit,
                                    "imageCode": imageCode.eq(index).val()
                                });
                            });
                            //验证通过
                            $('#specFormTable').ajaxSubmit({
                                url: addOrEditUrl,
                                type: "post",
                                dataType: "json",
                                data: { "optionList": optionList},
                                beforeSubmit: function (arr, $form, options) {
                                    layer.msg("提交数据~", { icon: 1, time: 5000 });
                                },
                                success: function (result, status, xhr, $form) {
                                    if (result.Statu === 0) {
                                        layer.closeAll();
                                        $table.bootstrapTable('refresh', options);
                                        layer.msg('保存成功', { icon: 1 });
                                    }
                                    else
                                        layer.alert(result.Msg, { icon: 5 });
                                },
                                error: function (xhr, status, error, $form) {
                                    layer.msg("保存失败~", { icon: 5 });
                                }
                            });
                        }
                    },
                    cancel: function (li, o) {

                    }
                });
            },
            //编辑
            specEdit: function (specID) {
                var row = $table.bootstrapTable('getRowByUniqueId', specID);
                if (!row) {
                    layer.msg("数据为空或未选中记录行~", { icon: 5 });
                    return false;
                }
                specManager.editForm(row);
            },
            //删除规格
            specDelete: function (specID) {
                layer.confirm('您确定要删除选中规格，删除规格价格、库存将同步被删除？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var index = layer.msg("删除中...", { icon: 6, time: 6000 });
                    $.ajax({
                        type: 'post',
                        url: ctx + '/VRSpecification/DelSpecById/' + specID,
                        dataType: 'json',
                        async: false,
                        success: function (data) {
                            if (index)
                                layer.close(index);
                            if (data.Statu === 0) {
                                layer.msg("删除成功...");
                                $table.bootstrapTable('refresh', options);
                            }
                            else
                                layer.alert(data.Msg, { icon: 5 });
                        }
                    });
                }, function () { });
            }
        }
        $(function () {
            specManager.initPage();
        });
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
    </script>
}